<template>
	<view class="evaluate-box solid-bottom">
		<view class="padding-tb-sm flex justify-between align-center">
			<view class="flex">
				<view class="block-80 round overHidden">
					<fu-image :src="prop.head_img" mode="aspectFill"></fu-image>
				</view>
				<view class="margin-left-sm flex flex-direction justify-between">
					<view class="text-df text-333">{{ prop.user_nickname }}</view>
					<view>
						<block v-for="(item, index) in 5" :key="index">
							<image class="block-24"
								:src="index + 1 <= prop.star ? require('./static/stard2.png') : require('./static/star2.png')"
								mode="aspectFill"></image>
						</block>
					</view>
				</view>
			</view>

			<view class="text-sm text-999">{{ prop.create_time }}</view>
		</view>
		<view class="padding-bottom-sm padding-top-sm text-df text-333 text-cut-english">{{ prop.content }}</view>
		<view class="padding-top-xs padding-bottom-sm">
			<view class="grid col-3">
				<block v-for="(ele, index) in prop.video" :key="index">
					<view class="padding-xs wrap-box" @tap.stop="previewVideo(ele)">
						<view class="square-wrap">
							<view class="square-box">
								<image :src="ele + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_300,h_300'"
									mode="aspectFill"></image>
								<view class="play-mask"></view>
								<view class="play-btn">
									<view class="play-arrow"></view>
								</view>
							</view>
						</view>
					</view>

				</block>
				<view v-for="(ele, index) in prop.thumb" :key="index">
					<view class="padding-xs wrap-box" @tap.stop="preview(ele, index)">
						<view class="square-wrap">
							<view class="square-box">
								<image :src="ele" lazy-load mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class=" padding-bottom-sm flex justify-between align-start">
			<view class="text-cut-2 text-999 text-sm">{{prop.key_name}}</view>
			<!-- 回复数 -->
			<view class="flex justify-between">
				<view>
				</view>
				<view class="text-000 comment-text flex">
					<view>
						<text class="" style="font-size: 24rpx;margin-right: 8rpx;">
							{{i18n['评论']}}
						</text>

						<!-- <text class="fu-iconfont margin-right-xs" style="font-size: 24rpx;margin-right: 24rpx;">&#xe6f5;</text>  -->
						<!-- {{prop.reply_num || 0}} -->
						<image class="comment-icon" :src="imgWechatUrl+'/goods/comment.png'"
							style="margin-right: 24rpx;" />
					</view>
					<view @click.stop='fabulous(prop)'>
						<text class="" style="font-size: 24rpx;margin-right: 8rpx;" :class='prop.is_likes?"active":""'>
							{{i18n['点赞']}}
						</text>
						<image class="fabulous-icon" v-if='!prop.is_likes'
							:src="imgWechatUrl+'/goods/fabulous-fail.png'" />
						<image class="fabulous-icon" v-else :src="imgWechatUrl+'/goods/fabulous-succ.png'" />
					</view>
					<!-- <text class="fu-iconfont margin-right-xs" style="font-size: 24rpx;">&#xe6f5;</text>  -->
				</view>
			</view>
		</view>
		<view class="video-mask" v-if="videoShow">
			<view class="padding-left flex align-center"
				:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class="cuIcon-back text-white" style="font-size: 36rpx;" @click.stop="closeVideo"></view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<video :src="videoSrc" class="myVideo" id="myVideo" :show-fullscreen-btn="false"
				:style="{ height: 'calc(100% - ' + CustomBar + 'px)' }"></video>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<video :src="videoSrc" class="myVideo" id="myVideo" :show-fullscreen-btn="false" :show-mute-btn="true"
				:style="{ height: 'calc(100% - ' + CustomBar + 'px)' }"></video>
			<!-- #endif -->
		</view>

		<!-- 商家回复 -->
		<view class="padding-top-xs padding-bottom-sm" v-if='prop.merchant_reply'>
			<view class="flex justify-between">
				<view class="merchant_reply">
					<text class="text-333">
						{{i18n['商家回复']}}：
					</text>
					{{prop.merchant_reply.merchant_content}}
				</view>
				<view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	/**
	 * @author
	 * @description 商品评价组件
	 * @param {Object} type - 没有用到这个属性，暂定
	 * @property {String} temp - 保存当前播放的是哪一个视频的id值+索引
	 */
	export default {
		props: {
			prop: {
				type: Object,
				required: true,
			}
		},
		data() {
			return {
				imgWechatUrl: this.imgWechatUrl,
				temp: '',
				videoContext: null,
				videoShow: false,
				videoSrc: ''
			}
		},
		mounted() {
			console.log('----------', this.prop)
		},
		methods: {
			fabulous(val) {
				console.log(val)
				// val.is_likes = !val.is_likes
			},
			/**
			 * @event
			 * @description 查看大图
			 * @param {Object} item - 图片的信息
			 * @param {Number} index - 当前图片的索引
			 */
			preview(item, index) {
				uni.previewImage({
					current: index,
					urls: this.prop.thumb,
				});
			},
			/**
			 * @event
			 * @description 查看视频
			 * @param {String} j - 视频路径
			 * @param {Number} index - 是第几个视频
			 * @param {String} el - 保存当前播放的是哪一个视频的id值+索引
			 */
			previewVideo(ele) {
				console.log('来了老弟', ele)
				this.videoShow = true;
				// 获取 video 上下文 videoContext 对象
				if (this.videoContext) this.videoContext = null;
				this.videoContext = uni.createVideoContext('myVideo', this);
				this.videoSrc = ele;
				// 开始播放
				setTimeout(() => {
					this.videoContext.play();
				}, 200);
			},
			/**
			 * @event
			 * @description 退出全屏时视频暂停
			 */
			fullscreenchange() {
				let temp = this.temp
				uni.createVideoContext(temp).pause(); //暂停视频播放事件
				uni.createVideoContext(temp).seek(0);
			},
			closeVideo() {
				this.videoContext.pause(); //暂停视频播放事件
				this.videoContext.seek(0);
				this.videoShow = false;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrap-box {
		background-color: #ffffff;

		.square-wrap {
			width: 100%;
			height: 0;
			padding-bottom: 100%;
			box-sizing: border-box;
			position: relative;

			.square-box {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				border-radius: 8rpx;

				.play-mask {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 99;
					width: 100%;
					height: 100%;
					background: rgba(255, 255, 255, 0.3);
				}

				.play-btn {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					border: 2rpx solid #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 100;

					.play-arrow {
						width: 0;
						height: 0;
						border-top: 18rpx solid transparent;
						border-left: 30rpx solid #ffffff;
						border-bottom: 18rpx solid transparent;
						margin-left: 8rpx;
					}
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
					position: relative;
					z-index: 98;
				}
			}
		}
	}

	.block-80 {
		width: 80rpx;
		height: 80rpx;
		min-width: 80rpx;
		min-height: 80rpx;
		background-color: #EEEEEE;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.block-24 {
		width: 24rpx;
		height: 24rpx;
		min-width: 24rpx;
		min-height: 24rpx;
	}

	.text-333 {
		color: #333333;
	}

	.text-999 {
		color: #999999;
	}

	.text-cut-english {
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
	}

	/* 300*225 */
	.grid-video image {
		width: 150rpx;
		height: 112rpx;
	}

	.merchant_reply {
		word-break: break-all;
		background: #f1f1f1;
		padding: 20rpx;
		border-radius: 5rpx;
		width: 100%;
	}

	.video-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000000;
		z-index: 99999;
		padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	}

	.myVideo {
		width: 750rpx;
	}

	.comment-icon {
		width: 26rpx;
		height: 24rpx;
	}

	.fabulous-icon {
		width: 24rpx;
		height: 26rpx;
	}

	.text-000 {
		color: #000000;
	}

	.comment-text {
		width: 200rpx;
	}

	.active {
		color: #FA2033;
	}
</style>
